import 'react-image-crop/dist/ReactCrop.css'
import ReactCrop, { type Crop } from 'react-image-crop'
import {useEffect, useRef, useState} from "react";
import { Card, Button, Upload, UploadProps } from 'antd';
import useDownload from '@/hooks/useDownload'

const ImageCrop = () => {
    const [crop, setCrop] = useState<Crop>()
    const [tempFile, setTempFile] = useState<File>()
    const [src, setSrc] = useState<string>('')
    const imgRef = useRef<HTMLImageElement>(null)
    const canvasRef = useRef<HTMLCanvasElement>(null)
    const { canvasToImage } = useDownload()
    const changeCrop = (c: Crop) => {
        setCrop(c)
        const canvas: HTMLCanvasElement = canvasRef.current as HTMLCanvasElement
        const img: HTMLImageElement = imgRef.current as HTMLImageElement
        canvas.style.width = `${c.width}px`
        canvas.style.height = `${c.height}px`
        canvas.width = img.width * devicePixelRatio
        canvas.height = img.height * devicePixelRatio
        const context = canvas.getContext('2d') as CanvasRenderingContext2D 
        const width = c.width * (img.naturalWidth / img.width)
        const height = c.height * (img.naturalHeight / img.height)
        const x = c.x * (img.naturalWidth / img.width)
        const y = c.y * (img.naturalHeight / img.height)
        context.drawImage(img, x, y, width, height, 0, 0, canvas.width, canvas.height)
    }
    const exportImage = () => {
        const canvas: HTMLCanvasElement = canvasRef.current as HTMLCanvasElement
        canvasToImage(canvas.toDataURL('image/png'))
    }
    const changeFile: UploadProps['onChange'] = (info) => {
        const { file } = info
        setTempFile(file.originFileObj)
    }
    const customRequest = () => {
        const url = URL.createObjectURL(tempFile as File)
        setSrc(url)
    }
    useEffect(() => {
        console.log(crop)
    }, [crop]);
    return (
        <Card title={
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>图片裁剪</div>
                <div style={{ display: 'flex' }}>
                    <Upload showUploadList={false} maxCount={1} onChange={changeFile} customRequest={customRequest} accept={import.meta.env.VITE_ACCEPT_IMAGE}>
                        <Button>导入图片</Button>
                    </Upload>
                    <Button style={{ marginLeft: '10px' }} type='primary' onClick={exportImage}>导出图片</Button>
                </div>
            </div>
        }>
            {src === '' ? 
                <div style={{ textAlign: 'center' }}>请导入文件</div>
            : <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                <div style={{ flex: '1', border: '1px solid #ccc' }}>
                    <ReactCrop crop={crop} onChange={changeCrop}>
                        <img ref={imgRef} src={src} />
                    </ReactCrop>
                </div>
                <div style={{ flex: '1' }}>
                    <canvas ref={canvasRef}></canvas>
                </div>
            </div>}
        </Card>
    )
}

export default ImageCrop